[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
책 목록 웹앱 만들기 정답 | ✅저자: 이유정(박사)
🔹 간단한 책 제목과 저자를 저장하고, 화면에 예쁘게 출력하는 웹앱
bookproject/
├── manage.py
├── bookproject/
│ └── settings.py, urls.py ...
└── books/
├── models.py
├── views.py
├── urls.py
├── templates/
│ └── books/
│ ├── base.html
│ └── book_list.html
└── static/
└── books/
└── css/
└── style.css
모델 정의 – books/models.py
from django.db import models
class Book(models.Model):
title = models.CharField(max_length=200)
author = models.CharField(max_length=100)
def __str__(self):
return f"{self.title} by {self.author}"
| id (자동 생성) | title | author |
|---|---|---|
| 1 | 데미안 | 헤르만 헤세 |
| 2 | 어린 왕자 | 앙투안 드 생텍쥐페리 |
| 3 | 삼국지 | 나관중 |
뷰 작성 – books/views.py
from django.shortcuts import render
from .models import Book
def book_list(request):
books = Book.objects.all()
return render(request, "books/book_list.html", {"books": books})
✔️ 의사코드:
함수 book_list(요청):
- Book 모델에서 모든 책 데이터를 가져온다 → books 변수에 저장
- 'books/book_list.html' 템플릿을 사용하여 웹 페이지를 만든다
- 템플릿에 books 데이터를 함께 전달한다
- 생성된 웹 페이지를 사용자에게 응답으로 보낸다
앱 URL 설정 – books/urls.py
from django.urls import path
from . import views
app_name = "books"
urlpatterns = [
path("", views.book_list, name="book_list"),
]
프로젝트 URL 연결 – bookproject/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path("admin/", admin.site.urls),
path("books/", include("books.urls")),
]
템플릿 – books/templates/books/base.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{% block title %}Book List{% endblock %}</title>
<link rel="stylesheet" href="{% static 'books/css/style.css' %}">
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>
템플릿 – books/templates/books/book_list.html
{% extends "books/base.html" %}
{% block title %}나의 책 목록{% endblock %}
{% block content %}
<h1>나의 책 목록</h1>
<ul class="book-list">
{% for book in books %}
<li>{{ book.title }} <small>- {{ book.author }}</small></li>
{% empty %}
<li>책이 없습니다.</li>
{% endfor %}
</ul>
{% endblock %}
CSS – books/static/books/css/style.css
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
margin: 2rem;
}
.container {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #4a4a4a;
}
.book-list {
list-style-type: none;
padding: 0;
}
.book-list li {
padding: 8px 0;
border-bottom: 1px solid #ddd;
}
설정 – settings.py STATIC 설정 확인
STATIC_URL = "static/"
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
Python 코드 실행기
